<template>
	<view>
		<view class="goods" :class="type == 2 ? 'yellow' : ''">
			<template v-if="type == 1">
				<view>
					
					<view @click="tan(item[$t('item.name')])" class="label divc" style="width: 100%;"><!-- {{$t("货物名称")}} -->{{item[$t('item.name')]}}</view>
					<view v-show="item[$t('item.brand')]" @click="tan(item[$t('item.brand')])" style="background-color: rgb(255,114,0); border-radius: 10rpx;
					  padding: 5rpx; width: auto;max-width: 150rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;  font-size: 24rpx;  font-weight: 500; color: white;">
					  {{item[$t('item.brand')]}}
					</view>
					
					<view class="imgFlex" style="position: relative;margin-top: 20rpx;">
						<block>
							<view v-if="item.logo && item.logo.length!=0"
							v-for="(items,index) in item.logo" :key="index">
								<image :src="items.url" style="width: 240rpx;height: 240rpx;border-radius: 20rpx;"></image>
							</view>
							<!-- <u-image width="240rpx" height="240rpx" :border-radius="20"  :src="toImages(item.logo)">
							</u-image> -->
						</block>
						<view style="position: absolute; bottom: 0rpx; right: 0rpx;">
							<view class="ui-item" style="border: 0px;">
								<view class="ui-video" v-for="(itemFile,indexFile) in item.buy_videos" :key="indexFile">
									
									<video style="width:360rpx;height:220rpx" v-if="indexFile==0 && itemFile.url!='https://gluz-oss.oss-cn-beijing.aliyuncs.com'" loop :initial-time="0" :id="'myVideo' + indexFile" :enable-play-gesture="true"
										object-fit="cover" :src="itemFile.url"
										:poster="itemFile.url + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"></video>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="lineP">
					<view class="label">{{$t("品牌")}}</view>
					<view class="text underline">
						{{item[$t('item.brand')]}}
					</view>
				</view> -->
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("类型")}}</view>
					<view v-if="item.goods_type==1" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("中国货物")}}
					</view>
					<view v-else-if="item.goods_type==2" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("俄罗斯货物")}}
					</view>
					<view v-else-if="item.goods_type==3" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("在中俄罗斯货物")}}
					</view>
					<view v-else-if="item.goods_type==4" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("在俄中国货物")}}
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("发货地")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						<!-- {{replaceSpaceWithComma($t(item.hyd))}} -->
						<view v-if="lang=='zh'">
							{{$t(item.departure_city)}}
						</view>
						<view v-else-if="lang=='ru'">
							{{$t(item.departure_city_ru)}}
						</view>
					</view>
				</view>
				
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("售价")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						<text class="small" style="color:#e33a13;font-weight: bold;">{{item.desire_price}} {{$t(item.price_unit)}}/{{item[$t("item.number_unit")]}}</text>
					</view>
				</view>
				
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("单位重量")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_weight)}} kg
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 0rpx solid #ccc; margin-bottom: 0rpx;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("单位体积")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.goods_volume)}} m³
					</view>
				</view>
				
				<!-- <view class="lineP">
					<view class="label">{{$t("期望单价")}}</view>
					<view class="text price">
						{{item.desire_price}}
						<text class="small"> {{$t(item.price_unit)}}/{{item[$t("item.number_unit")]}}</text>
					</view>
				</view> -->
				
				
				<!-- <view class="lineP">
					<Tag :text="item[$t('item.goods_weight')] + ' kg'" color="#13b5b1"></Tag>
					<Tag :text="item[$t('item.goods_volume')] + ' m³'" color="#13b5b1" :plain="true"></Tag>
				</view> -->
			</template>
		</view>
		<view class="goods" :class="type==1?'white':'yellow'">
			<ProductWHL :item="item" :type="type"></ProductWHL>
		</view>
		<view class="goods" :class="type == 2 ? 'yellow' : ''" style="position: relative;">
			<template v-if="type == 1">
				<view style="font-size: 30rpx;  font-weight: bold;"><span style="color:darkorange ;margin-right: 5px;">|</span> {{$t("详细信息")}}</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("起批数量")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.numbers)}}{{$t(item.number_unit)}}
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("生产时间")}}</view>
					<view class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t(item.desire_speed)}}{{$t("天")}}
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("是否含运费")}}</view>
					<view v-if="item.is_express_price==1" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("否")}}
					</view>
					<view v-else-if="item.is_express_price==2" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("是")}}
					</view>
				</view>
				<view class="lineP" style="display: flex;border-bottom: 1rpx solid #ccc;">
					<view class="label" :class="lang!='zh'?'ru_font':''" style="width:45%; font-weight: 500;padding-left: 20rpx;">{{$t("付款方式")}}</view>
					<view v-if="item.pay_type==1" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("预付全款")}}
					</view>
					<view v-else-if="item.pay_type==2" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("预付定金")}}
					</view>
					<view v-else-if="item.pay_type==3" class="text underline" :class="lang!='zh'?'ru_font':''" style="width:55%; text-align: right;  padding-right: 20rpx;">
						{{$t("货到付款")}}
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import Tag from '@/components/Tag.vue'
	import ProductWHL from '@/components/ProductWHL.vue'

	import {
		ImageUrl,
		isBase64
	} from "@/common/public";
	import {
		IMAGE_URL
	} from '@/config/app'
	export default {
		props: {
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
		},
		watch: {
			item: {
				handler(val) {
					console.log(val)
					this.item=val
				},
				immediate: true,
			}
		},
		components: {
			Tag,
			ProductWHL
		},
		computed: {
			toImages() {
				return (src) => {
					return IMAGE_URL + src
				}
			},
			storeImages() {
				return (sum, images) => [images[0]]
			},
		},
		mounted() {
		},
		methods: {
			ImageUrl,
			replaceSpaceWithComma(str) {
			   str = str.replace(/-/g, ',');
			   str = str.replace(/^[,]+|[,]+$/g, '');
			   return str;
			},
			tan(content){
				uni.showModal({
					content:content,
					showCancel: false,
					confirmText: this.$t('是'),
				})
			}
		},
		data() {
			return {
				lang: getApp().globalData.lang,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.white{background-color: white;}
	.yellow{ background-color: #fefcf6; }
	.divc{
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.goods {
		width: 90%;
		box-shadow: 0 0 10px #ddd;
		border-radius: 10px;
		padding: 10px 12px;
		margin: 0 auto;
		margin-bottom: 20rpx;
		font-size: 30rpx;

		&.yellow {
			background: #fefcf6;
		}

		.price {
			color: #e71818 !important;
			font-size: 50rpx;

			.small {
				font-size: 30rpx;
				padding-left: 10rpx;
			}
		}

		.underline {
			border-bottom: 0rpx solid #ccc;
			padding-bottom: 10rpx;
		}

		.label {
			font-weight: 800;
			margin-bottom: 10rpx;
		}

		.text {
			color: #666;
			margin-top: 0rpx;
		}

		.lineP {
			margin: 20rpx 0 30rpx 0;
		}
		
		.ru_font{ font-size: 20rpx !important;}

		.flexImg {
			display: flex;
			align-items: stretch;
			flex-direction: row;
			justify-content: space-evenly;

			.imgFlex {
				flex: 1;
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				//justify-content: space-between;
			}
		}
	}
	
	
</style>